/* 弹性布局 */ 
.flex {
    display: flex
}
.align-center {
    display: flex;
    align-items: center;
}
.center-xy {
    display: flex;
    align-items: center;
    justify-content: center;
}


//.flex1 { flex: 1 }
@for $val from 1 to 11 {
    .flex#{$val} {
        flex: $val
    }
}

//.justify-around { display: flex; justify-content: space-around; }
@each $type, $realType in ( justify-around: space-around, justify-between: space-between, justify-center: center  ) {
    .#{$type} {
        display: flex;
        justify-content: #{$realType};
    }
}